import { reactive, ref } from "vue";
// 导入登录接口
import { login } from "@/api/userAPI";
// 导入router
import { useRouter } from "vue-router";
// 导入vuex
import { useStore } from "vuex";
// 导入提示方法
import { message } from "ant-design-vue";

export const useLoginSubmit = () => {
  // 使用router
  const router = useRouter();
  // 使用vuex
  const store = useStore();
  // 登录表单数据
  const loginModel = reactive({
    username: "",
    password: "",
  });
  // loginFormRef
  const loginFormRef = ref(null);
  // 登录状态
  const logining = ref(false);

  // 提交表单
  const loginSubmit = () => {
    // 校验登录表单的数据
    loginFormRef.value
      .validate()
      .then(async () => {
        // 开启正在登录状态
        logining.value = true;
        // 请求参数
        let params = {
          username: loginModel.username,
          password: loginModel.password,
        };
        // 发起登录请求
        let res = await login(params);
        // 关闭正在登录状态
        logining.value = false;
        if (res.status === 200) {
          // 提示用户登录成功
          message.success("登录成功");
          // 将token存入vuex
          store.commit("userStore/SET_TOKEN", res.token);
          // 将用户信息存入vuex
          store.commit("userStore/SET_USERINFOS", res.data);
          // 将用token存在本地
          window.localStorage.setItem("token", res.token);
          // 将用户信息存在本地
          window.localStorage.setItem("userInfos", JSON.stringify(res.data));
          // 跳转主页
          router.push("/home");
        } else {
          // 提示用户登录失败
          message.error(res.msg);
        }
      })
      .catch((error) => {
        throw new Error(error);
      });
  };

  return {
    loginModel,
    loginFormRef,
    logining,
    loginSubmit,
  };
};
